<template>
    <div id="editormd" style="width: 85%;">
        <textarea name="article" id="article" v-model="markdownToHtml"></textarea>
    </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from 'vue'

const props = defineProps({
    content: {
        type: String,
        default: ''
    }
})

const editor = ref(null)
console.log('传递过来的文章内容为：' + props.content);

const markdownToHtml = computed(() => props.content)

function initEditor() {
    (async () => {
        await nextTick(() => {
            editor.value = editormd.markdownToHTML('editormd', {
                path: '/lib/editor.md/lib/',
                width:'90%',
                emoji: true,
                htmlDecode: true,
                taskList: true,
                flowChart: true,
                sequenceDiagram: true,
                codeFold: true,
            })
        })
    })()
}


onMounted(() => {
    console.log('挂载组件');
    initEditor()
})

</script>

<style></style>